import React, { useState,useEffect } from 'react';
import { Modal, Button, Select } from 'antd';
import { Table, Tag, Popconfirm } from 'antd';
import moment from 'moment';
const { Option } = Select;
export default function Des(props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [dataSource,setDataSource] = useState()
    let data=[
        {
            key: '1',
            subject: '英语四级笔试',
            cost: 20,
            school: '西南科技大学',
            address:'本校区',
            amount: 20,
            time: moment(Date()).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            key: '1',
            subject: '英语四级口试',
            cost: 15,
            school: '西南科技大学',
            address:'本校区',
            amount: 5,
            time: moment(Date()).format('YYYY-MM-DD HH:mm:ss')
        }
    ]
    useEffect(() => {
        setDataSource(data);
    }, [])
    const columns = [
        {
            title: '科目',
            dataIndex: 'subject',
            key: 'subject',
            render: text => <a>{text}</a>,
        },
        {
            title: '费用(元)',
            dataIndex: 'cost',
            key: 'cost',
            render: cost => {
                return <Tag color='green' key={cost}>
                    {cost}
                </Tag>
            }
        },
        {
            title: '报名学校',
            dataIndex: 'school',
            key: 'school',
        },
        {
            title: '报名校区',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '剩余容量',
            dataIndex: 'amount',
            key: 'amount',
            render: amount => {
                return <Tag color='green' key={amount}>
                    {amount}
                </Tag>
            }
        },
        {
            title: '报名时间',
            dataIndex: 'time',
            key: 'time',
            render: time => {
                return <Tag color='green' key={time}>
                    {time}
                </Tag>
            }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (_, record, index) => (
                <>
                    <Popconfirm
                        title="确认报名?"
                        onConfirm={()=>{
                            singleDelete(record,index)
                        }}
                    >
                        <Button type="primary">报名</Button>
                    </Popconfirm>
                </>
            ),
        }

    ];
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const singleDelete = (record, index) => {
        data.splice(index,1);
        setDataSource(data)
      }

    return (
        <>
            <Button type="primary" onClick={showModal}>
                下一步
            </Button>
            <Modal title="个人信息" visible={isModalVisible} onCancel={handleCancel} footer={null} width={700}>
                <Table columns={columns} dataSource={dataSource} width={1500} />
            </Modal>
        </>
    );
}
export { Des }




